<script setup>

defineProps({enter: Boolean})
</script>

<template>
  <view class="container">
    <view class="column" v-if="enter">
      <view class="clients-grid">
        <view class="column grid bottomIn d3s" v-for="(u,i) in 32" :key="i">
          <img :src="`../images/clients/img_${i}.png`" width="60%" alt="">
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  height: calc(100vw * (600 / 1920));

  .clients-grid {
    display: grid;
    grid-template-columns: repeat(8, 12.5%);
    grid-template-rows: repeat(4, 30%);
    grid-row-gap: 6%;

    .grid {
      opacity: 0.6;
      align-items: center;
      justify-content: center;

      img {
        will-change: filter;
        transition: filter 300ms;
        cursor: pointer;
      }

      img:hover {
        filter: drop-shadow(0 0 1em white);
      }
    }
  }
}
</style>